<template>
  <section class="auth">
    <h1 class="title">注册</h1>
    <form class="form" @submit.prevent="onSubmit">
      <label>
        <span>用户名</span>
        <input v-model="username" type="text" autocomplete="username" />
      </label>
      <label>
        <span>密码</span>
        <input v-model="password" type="password" autocomplete="new-password" @input="checkPasswordStrength" />
      </label>
      <div v-if="password" class="password-strength">
        <div class="strength-bars">
          <div 
            class="strength-bar"
            :class="{ 
              'weak': passwordStrength >= 1,
              'medium': passwordStrength >= 2,
              'strong': passwordStrength >= 3
            }"
          ></div>
        </div>
        <p class="strength-text" :class="strengthClass">{{ strengthText }}</p>
      </div>
      <p v-if="error" class="error">{{ error }}</p>
      <button type="submit" :disabled="!isPasswordValid">注册</button>
      <p class="hint">已有账号？<a @click.prevent="goLogin" href="/login">去登录</a></p>
    </form>
  </section>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '@/utils/auth'

const router = useRouter()
const username = ref('')
const password = ref('')
const error = ref('')
const passwordStrength = ref(0)

// 检测密码强度
function checkPasswordStrength() {
  const pwd = password.value
  let strength = 0
  
  // 检查密码长度
  if (pwd.length >= 8) strength += 1
  
  // 检查是否包含数字和字母
  const hasNumber = /\d/.test(pwd)
  const hasLetter = /[a-zA-Z]/.test(pwd)
  const hasSymbol = /[^a-zA-Z0-9]/.test(pwd)
  
  if (hasNumber && hasLetter) strength += 1
  if (hasSymbol && hasNumber && hasLetter) strength += 1
  
  passwordStrength.value = strength
}

// 计算密码强度文本
const strengthText = computed(() => {
  if (!password.value) return ''
  if (password.value.length < 8) return '密码长度必须不少于8位'
  
  if (passwordStrength.value === 1) return '密码强度：弱（需要包含数字和字母）'
  if (passwordStrength.value === 2) return '密码强度：中等（建议添加特殊符号）'
  return '密码强度：强'
})

// 计算密码强度样式类
const strengthClass = computed(() => {
  if (!password.value) return ''
  if (passwordStrength.value === 1) return 'weak-text'
  if (passwordStrength.value === 2) return 'medium-text'
  return 'strong-text'
})

// 密码是否有效（可注册）
const isPasswordValid = computed(() => {
  // 密码长度不少于8位且强度至少为2（包含数字和字母）
  return password.value.length >= 8 && passwordStrength.value >= 2
})

async function onSubmit() {
  error.value = ''
  
  // 再次验证密码强度
  checkPasswordStrength()
  
  if (!isPasswordValid.value) {
    error.value = '密码不符合要求，请设置包含数字和字母的密码，长度不少于8位'
    return
  }
  
  try {
    await register(username.value, password.value)
    router.push('/')
  } catch (e) {
    error.value = e?.message || '注册失败'
  }
}

function goLogin() { router.push('/login') }
</script>

<style scoped>
.auth { max-width: 420px; margin: 0 auto; }
.title { margin: 12px 4px 12px; font-size: 24px; font-weight: 800; }
.form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; }
input { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; }
button { padding: 10px 14px; border: none; border-radius: 999px; background: #00a1d6; color: #fff; cursor: pointer; }
button:disabled { background: #cccccc; cursor: not-allowed; }
.error { color: #d14343; }
.hint { color: #6b7280; }
.hint a { color: #00a1d6; cursor: pointer; }

/* 密码强度指示器样式 */
.password-strength {
  display: grid;
  gap: 6px;
}

.strength-bars {
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  width: 0;
  transition: width 0.3s ease;
}

.strength-bar.weak {
  width: 33%;
  background-color: #d14343;
}

.strength-bar.medium {
  width: 66%;
  background-color: #f59e0b;
}

.strength-bar.strong {
  width: 100%;
  background-color: #10b981;
}

.strength-text {
  font-size: 14px;
  margin: 0;
}

.weak-text {
  color: #d14343;
}

.medium-text {
  color: #f59e0b;
}

.strong-text {
  color: #10b981;
}
</style>